/**
 * Plugin for displaying a progressbar inside of a paging toolbar instead of
 * plain text.
 */
Ext.define('Ext.ux.ProgressBarPager', {

	requires : ['Ext.ProgressBar'],
	/**
	 * @cfg {Number} width
	 *      <p>
	 *      The default progress bar width. Default is 225.
	 *      </p>
	 */
	width : 225,
	/**
	 * @cfg {String} defaultText
	 *      <p>
	 *      The text to display while the store is loading. Default is
	 *      'Loading...'
	 *      </p>
	 */
	defaultText : 'Loading...',
	/**
	 * @cfg {Object} defaultAnimCfg
	 *      <p>
	 *      A {@link Ext.fx.Anim Ext.fx.Anim} configuration object.
	 *      </p>
	 */
	defaultAnimCfg : {
		duration : 1000,
		easing : 'bounceOut'
	},

	/**
	 * Creates new ProgressBarPager.
	 * 
	 * @param {Object}
	 *            config Configuration options
	 */
	constructor : function(config) {
		if (config) {
			Ext.apply(this, config);
		}
	},
	// public
	init : function(parent) {
		var displayItem;
		if (parent.displayInfo) {
			this.parent = parent;

			displayItem = parent.child("#displayItem");
			if (displayItem) {
				parent.remove(displayItem, true);
			}

			this.progressBar = Ext.create('Ext.ProgressBar', {
						text : this.defaultText,
						width : this.width,
						animate : this.defaultAnimCfg,
						style : {
							cursor : 'pointer'
						},
						listeners : {
							el : {
								scope : this,
								click : this.handleProgressBarClick
							}
						}
					});

			parent.displayItem = this.progressBar;

			parent.add(parent.displayItem);
			Ext.apply(parent, this.parentOverrides);
		}
	},
	// private
	// This method handles the click for the progress bar
	handleProgressBarClick : function(e) {
		var parent = this.parent, displayItem = parent.displayItem, box = this.progressBar
				.getBox(), xy = e.getXY(), position = xy[0] - box.x, pages = Math
				.ceil(parent.store.getTotalCount() / parent.pageSize), newPage = Math
				.max(Math.ceil(position / (displayItem.width / pages)), 1);

		parent.store.loadPage(newPage);
	},

	// private, overriddes
	parentOverrides : {
		// private
		// This method updates the information via the progress bar.
		updateInfo : function() {
			if (this.displayItem) {
				var count = this.store.getCount(), pageData = this
						.getPageData(), message = count === 0
						? this.emptyMsg
						: Ext.String.format(this.displayMsg,
								pageData.fromRecord, pageData.toRecord,
								this.store.getTotalCount()), percentage = pageData.pageCount > 0
						? (pageData.currentPage / pageData.pageCount)
						: 0;

				this.displayItem.updateProgress(percentage, message,
						this.animate || this.defaultAnimConfig);
			}
		}
	}
});
